var that = this;
class Tab {
    constructor(id) {
        that = this;
        //获取元素
        this.main = document.querySelector(id);
        this.lis = this.main.querySelectorAll('.tabnav li');
        this.sections = this.main.querySelectorAll('.content section');
        // this.btnadd = this.main.querySelector('.addcomment');
        // this.confirst = this.main.querySelector('.confirst');


        //调用方式2
        this.init();
    }
    init() {
        //初始化操作 让相关元素绑定事件
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onmouseover = this.toggleTab;
        }
    }
    //1.切换功能
    toggleTab() {
        that.clearClass();
        this.className = 'current';
        that.sections[this.index].className = 'pitch-on';
    }
    clearClass() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
}
//调用方式1
// var tab = new Tab('.head');
// tab.init();
new Tab('.tab');




// dream
window.onload = function () {
    var travel = document.querySelector('.travel');
    var ul = travel.children[2];
    var lis = ul.querySelectorAll('li')

    for (let i = 0; i < lis.length; i++) {
        lis[i].index = i;
        lis[i].onclick = site;
    }
    function site() {
        window.location.href = '../travel/' + (this.index + 1) + '.html';
    }


    var ootd = document.querySelector('.ootd');
    var ootd_div = ootd.querySelectorAll('div');
    for (let i = 0; i < ootd_div.length; i++) {
        ootd_div[i].index = i;
        // 图片放大
        ootd_div[i].children[1].onclick = function () {
            document.querySelector('.tab').style.display = 'none';
            document.querySelector('#img').style.display = 'block';
            callback.style.display = 'none';
            var img = document.querySelector('#img img');
            // 之前做的时候，没有想到自己的更新是自下往上的，所以有一些问题，这次之后就不会有问题了
            // console.log(this.parentNode.index);
            // console.log(ootd_div.length);
            // 图片放大的地址
            var name = '../img/ootd' + (this.parentNode.index - ootd_div.length + 3) + '.jpg';
            img.setAttribute("src", name);
            img.style.display = 'block';
            document.querySelector('#img').children[0].style.display = 'block';
            document.querySelector('#img').children[0].onclick = function () {
                document.querySelector('#img').style.display = 'none';
                document.querySelector('.tab').style.display = 'block';
                callback.style.display = 'block';
            }
        }
    }

    var callback = document.querySelector('.callback');
    callback.onclick = function () {
        window.location.href = 'index2.html';
    }

}